<template>
  <div v-if="this.browser.isPc">
    <div class="login">
      <transition
        enter-active-class="animate__animated animate__bounceInDown"
      >
        <div class="loginInfo" v-if="show">
          <el-row>
            <el-col :span="10" class="zuo">
              <img src="../assets/jpg/login.c722746b.svg" alt="" style="margin-top: 5vh">
            </el-col>
            <el-col :span="14">
              <el-row>
                <el-col :span="24">
                  <div style="text-align:center;font-size: 2em;font-weight: 600;margin-top: 2vh"> TAO 快速开发平台</div>
                </el-col>
              </el-row>
              <el-row style="margin-top: 5vh">
                <el-col :span="24" >
                  <el-form
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleForm"
                    label-width="65px"
                    :hide-required-asterisk="true"
                    class="login-ruleForm"
                  >
                    <el-form-item label="" prop="username" style="margin-top: 1vh">
                      <el-input
                        style="width: 20vw;"
                        prefix-icon="Postcard"
                        v-model="ruleForm.username"
                        size="large"
                        autocomplete="off"
                        placeholder="请输入账户"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password"  style="margin-top: 1vh">
                      <el-input
                        style="width: 20vw"
                        prefix-icon="Lollipop"
                        size="large"
                        type="password"
                        v-model="ruleForm.password"
                        autocomplete="off"
                        show-password
                        placeholder="请输入密码"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="code">
                      <el-input   prefix-icon="Link" v-model="ruleForm.code" size="large"   style="width: 20vw" placeholder="请输入验证码">
                        <template #suffix>
                          <img :src="codeBase64" style="height: 5vh;margin-top: 1px;cursor:pointer" alt="" title="点击刷新" @click="captcha()">
                        </template>
                      </el-input>
                    </el-form-item>
                    <span style="height: 10px;float: right;font-size: 10px;color: #C0C4CC;margin-right: 4vw;cursor:pointer">忘记密码?</span>
                    <el-form-item style="margin-top: 50px">
                      <el-button type="primary" @click="submitForm('ruleForm')" style="width: 20vw;height: 40px" round >登录</el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </transition>

    </div>
  </div>
  <!--登录页面移动端适配-->
  <div v-else>
    <div class="loginInfoNotPc">
        <el-row>
          <el-col :span="24">
            <div style="text-align:center;font-size: 20px;font-weight: 600;">
              <svg class="icon" aria-hidden="true"  style="width: 2em;height: 2em;margin-left: 5px">
                <use xlink:href="#icon-taozi"></use>
              </svg>
              <span style="margin-left: 3vw;font-size: 28px">TAO</span>
              </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="24" >
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="65px"
              label-position="top"
              :hide-required-asterisk="true"
              class="login-ruleFormNotPc"
            >
              <el-form-item label="" prop="username" >
                <el-input
                  style="width: 80vw;"
                  prefix-icon="Postcard"
                  v-model="ruleForm.username"
                  size="large"
                  autocomplete="off"
                  placeholder="请输入账户"
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input
                  style="width: 80vw;"
                  prefix-icon="Lollipop"
                  size="large"
                  type="password"
                  v-model="ruleForm.password"
                  autocomplete="off"
                  show-password
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item label="" prop="code">
                <el-input   prefix-icon="Link" v-model="ruleForm.code" size="large"   style="width: 80vw;" placeholder="请输入验证码">
                  <template #suffix>
                    <img :src="codeBase64" style="height: 9vw;margin-top:1px;cursor:pointer" alt="" title="点击刷新" @click="captcha()">
                  </template>
                </el-input>
              </el-form-item>
              <span style="height: 10px;float: right;font-size: 10px;color: #C0C4CC;margin-right: 10vw;cursor:pointer">忘记密码?</span>
              <el-form-item style="margin-top: 50px;margin-bottom: 20px">
                <el-button type="primary" @click="submitForm('ruleForm')" style="width: 80vw;height: 40px" round >登录</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
    </div>
  </div>

</template>

<script>
import { INIT_SYSTEM, TOKEN } from '@/store/methodConstant'
import {browserUa} from '@/utils/utils'
export default {
  name: 'Login',
  data(){
    return{
      show:false,
      ruleForm:{
        username:'admin',
        password: '3179927046',
        code :'',
        codeKey: ''
      },
      codeBase64:'',
      rules:{
        username: [
          { required: true, message: '请输入账户', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          {
            min: 5,
            max: 5,
            message: '验证码长度为5',
            trigger: 'blur',
          },
        ],
      },
      browser:{},
      options:{
        lock: true,
        text:'系统资源加载中,请稍后',
        background: 'rgba(0, 0, 0, 0.7)',
      }
    }
  },
  mounted () {
    localStorage.clear()
    setTimeout(() =>{this.show = true},200)
    this.captcha()
    this.browser = browserUa()
  },
  methods:{
    //获得验证码
    captcha(){
      this.$http.get('/api/captcha').then(res => {
          this.codeBase64 = res.data.data.captcha
          this.ruleForm.codeKey = res.data.data.captchaKey
      })
    },
    //登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let service = this.$loading(this.options)
          //采用表单形式提交
          let formData = new FormData()
          formData.append("username",this.ruleForm.username)
          formData.append("password",this.ruleForm.password)
          formData.append("code",this.ruleForm.code)
          formData.append("codeKey",this.ruleForm.codeKey)
          this.$http.post('/api/login',formData,{headers:{'contentType': 'application/x-www-form-urlencoded'}}).then(res =>{
            //登录成功,设置token
            this.$store.commit(TOKEN,res.data.data)
            //开始系统初始化
            this.$store.dispatch(INIT_SYSTEM)
            //延迟一会在跳转
            setTimeout(() =>{
              //关闭加载动画
              this.$router.push("/")
              service.close()
            },1000)
          }).catch(() => service.close())
        } else {
          this.captcha()
          console.log('error submit!!')
          return false
        }
      })
    },
  }
}
</script>

<style scoped>
.login {
  background-image: url('../assets/jpg/c7af6d35f19142ad92a5588e3128d046.5089b574.jpg');
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  min-height: 100%;
  align-content: center;
}
.loginInfo {
  width: 48vw;
 /* min-height: 50vh;*/
  margin-top: 8%;
  margin-left: 25%;
  padding: 5px;
  background: #fff;
  opacity: 0.95;
  border-radius: 10px;
}
.loginInfoNotPc {
  width: 100vw;
  height: 100vh;
  margin-top: 8%;
  background: #fff;
  opacity: 0.95;
  border-radius: 10px;
}
.zuo {
  background-color: #409EFF;
/*  height: 50vh;*/
  border-radius: 10px;
}
.login-ruleForm {
}
.login-ruleFormNotPc {
  margin-left: 10vw;
}
</style>
